//https://github.com/xiaolin3303/wx-charts
const towxImg = require('../../../utils/towxImg');
var wxCharts = require('../../utils/wxcharts')
// pages/charts/charts.js

var random1 = Math.floor(Math.random() * (500 - 50 + 1) + 50),
  random2 = Math.floor(Math.random() * (800 - 100 + 1) + 100),
  random3 = Math.floor(Math.random() * (1000 - 200 + 1) + 200),
  random4 = Math.floor(Math.random() * (300 - 10 + 1) + 10),
  random5 = Math.floor(Math.random() * (600 - 300 + 1) + 300)

Page({
  data: {
    pieChart: null,
    lineChart: null,
    columnChart: null,
    article: ''
  },
  touchHandler: function (e) {
    console.log(pieChart.getCurrentDataIndex(e));
  },

  setPieChart(windowWidth) {
    let pieChart = new wxCharts({
      animation: true,
      canvasId: 'pieCanvas',
      type: 'pie',
      series: [
        { name: '成交量1', data: 15, },
        { name: '成交量2', data: 35, },
        { name: '成交量3', data: 78, },
        { name: '成交量4', data: 63, },
        { name: '成交量2', data: 35, },
        { name: '成交量3', data: 78, },
        { name: '成交量4', data: 63, },
        { name: '成交量2', data: 35, },
        { name: '成交量3', data: 78, },
        { name: '成交量3', data: 78, }
      ],
      width: windowWidth,
      height: 300,
      dataLabel: true,
    });

    this.setData({ pieChart })
  },

  setLineChart(windowWidth) {
    let lineChart = new wxCharts({
      animation: true,
      canvasId: 'lineCanvas',
      type: 'line',
      categories: ['201708', '201709', '201710', '201711', '201712'],
      series: [{ // 数据列表
        name: ' ',
        data: [random1, random2, random3, random4, random5]
      }],
      yAxis: {
        min: 0 // Y轴起始值
      },
      width: windowWidth,
      height: 200,
      dataLabel: true, // 是否在图表中显示数据内容值
      legend: false, // 是否显示图表下方各类别的标识
      extra: {
        lineStyle: 'curve' // (仅对line, area图表有效) 可选值：curve曲线，straight直线 (默认)
      }
    });

    this.setData({ lineChart })
  },

  setColumnChart(windowWidth) {
    let columnChart = new wxCharts({
      animation: true,
      canvasId: 'columnCanvas',
      type: 'column', // 图表类型，可选值为pie, line, column, area, ring
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{ // 数据列表
        name: '捆包1', // 数据名称
        color: '#5AC59F', // 配色，不传入则使用系统默认配色方案
        data: [15, 20, 45, 37, 4, 80]
      }, {
        name: '捆包2',
        color: '#8AD2F5',
        data: [70, 40, 65, 100, 34, 18]
      }],
      yAxis: {
        min: 0, // Y轴起始值
        format: function (val) {
          return val + '万';
        }
      },
      width: windowWidth, // 宽度，单位为px
      height: 300, // 高度，单位为px
      legend: false, // 是否显示图表下方各类别的标识
      dataLabel: true, // 是否在图表中显示数据内容值
      extra: {
        column: {
          width: 30 // 柱状图每项的图形宽度，单位为px
        }
      }
    });

    this.setData({ columnChart })
  },

  onLoad: function (e) {
    var windowWidth = 320;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }

    this.setPieChart(windowWidth);
    this.setLineChart(windowWidth);
    this.setColumnChart(windowWidth);

    let code = '```\n<view class="my-page">\n  <view>\n    <view>扇形图</view>\n    <canvas canvas-id="pieCanvas" class="canvas" style="width:100vw;height:300px" bindtouchstart="touchHandler"></canvas>\n  </view>\n  <view style="margin-top: 100rpx;">\n    <view>扇形图</view>\n    <canvas canvas-id="lineCanvas" class="canvas" style="width:100vw;height:200px;"></canvas>\n  </view>\n  <view style="margin-top: 100rpx;">\n    <view>柱状图</view>\n    <canvas canvas-id="columnCanvas" class="canvas" style="width:100vw;height:300px;"></canvas>\n  </view>\n</view>\n```\n\n```\n//https://github.com/xiaolin3303/wx-charts\nvar wxCharts = require("../../../utils/wxcharts.js")\n// pages/charts/charts.js\nvar random1 = Math.floor(Math.random() * (500 - 50 + 1) + 50),\n  random2 = Math.floor(Math.random() * (800 - 100 + 1) + 100),\n  random3 = Math.floor(Math.random() * (1000 - 200 + 1) + 200),\n  random4 = Math.floor(Math.random() * (300 - 10 + 1) + 10),\n  random5 = Math.floor(Math.random() * (600 - 300 + 1) + 300)\nPage({\n  data: {\n    pieChart: null,\n    lineChart: null,\n    columnChart: null,\n  },\n  touchHandler: function (e) {\n    console.log(pieChart.getCurrentDataIndex(e));\n  },\n  setPieChart(windowWidth) {\n    let pieChart = new wxCharts({\n      animation: true,\n      canvasId: "pieCanvas",\n      type: "pie",\n      series: [\n        { name: "成交量1", data: 15, },\n        { name: "成交量2", data: 35, },\n        { name: "成交量3", data: 78, },\n        { name: "成交量4", data: 63, },\n        { name: "成交量2", data: 35, },\n        { name: "成交量3", data: 78, },\n        { name: "成交量4", data: 63, },\n        { name: "成交量2", data: 35, },\n        { name: "成交量3", data: 78, },\n        { name: "成交量3", data: 78, }\n      ],\n      width: windowWidth,\n      height: 300,\n      dataLabel: true,\n    });\n    this.setData({ pieChart })\n  },\n  setLineChart(windowWidth) {\n    let lineChart = new wxCharts({\n      animation: true,\n      canvasId: "lineCanvas",\n      type: "line",\n      categories: ["201708", "201709", "201710", "201711", "201712"],\n      series: [{ // 数据列表\n        name: " ",\n        data: [random1, random2, random3, random4, random5]\n      }],\n      yAxis: {\n        min: 0 // Y轴起始值\n      },\n      width: windowWidth,\n      height: 200,\n      dataLabel: true, // 是否在图表中显示数据内容值\n      legend: false, // 是否显示图表下方各类别的标识\n      extra: {\n        lineStyle: "curve" // (仅对line, area图表有效) 可选值：curve曲线，straight直线 (默认)\n      }\n    });\n    this.setData({ lineChart })\n  },\n  setColumnChart(windowWidth) {\n    let columnChart = new wxCharts({\n      animation: true,\n      canvasId: "columnCanvas",\n      type: "column", // 图表类型，可选值为pie, line, column, area, ring\n      categories: ["2012", "2013", "2014", "2015", "2016", "2017"],\n      series: [{ // 数据列表\n        name: "捆包1", // 数据名称\n        color: "#5AC59F", // 配色，不传入则使用系统默认配色方案\n        data: [15, 20, 45, 37, 4, 80]\n      }, {\n        name: "捆包2",\n        color: "#8AD2F5",\n        data: [70, 40, 65, 100, 34, 18]\n      }],\n      yAxis: {\n        min: 0, // Y轴起始值\n        format: function (val) {\n          return val + "万";\n        }\n      },\n      width: windowWidth, // 宽度，单位为px\n      height: 300, // 高度，单位为px\n      legend: false, // 是否显示图表下方各类别的标识\n      dataLabel: true, // 是否在图表中显示数据内容值\n      extra: {\n        column: {\n          width: 30 // 柱状图每项的图形宽度，单位为px\n        }\n      }\n    });\n    this.setData({ columnChart })\n  },\n  onLoad: function (e) {\n    var windowWidth = 320;\n    try {\n      var res = wx.getSystemInfoSync();\n      windowWidth = res.windowWidth;\n    } catch (e) {\n      console.error("getSystemInfoSync failed!");\n    }\n    this.setPieChart(windowWidth);\n    this.setLineChart(windowWidth);\n    this.setColumnChart(windowWidth);\n  }\n});\n```\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  }
});